import {useState} from 'react'
import './zhuce.less'
import { Button,Notification } from 'tdesign-react';
import 'tdesign-react/es/style/index.css'
import axios from 'axios';
import {useNavigate} from 'react-router-dom'
export default function Zhuce() {
    let navigate=useNavigate()
    let [name,setName]=useState('')
    let [pwd,setPwd]=useState('')
    let [pwd2,setPwd2]=useState('')
    let [flag,setFlag]=useState(false)
    let [succ,setSucc]=useState(false)
    let [err,setErr]=useState(false)
    const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>/?])[a-zA-Z\d!@#$%^&*()_+\-=\[\]{};':"\\|,.<>/?]{8,}$/;

    const checkPasswordComplexity = (password) => {
        if (!passwordRegex.test(password)) {
            setFlag(true);
        } else {
            setFlag(false);
        }
    };

    let jiancha = (e) => {
        setPwd2(e.target.value);
        if (pwd!== pwd2) {
            setFlag(true);
        } else {
            setFlag(false);
        }
        // 实时检查再次输入密码的长度和复杂度是否达到要求
        if (e.target.value.length < 8) {
            setFlag(true);
        } else {
            checkPasswordComplexity(e.target.value);
        }
    };

    let register=async()=>{
      let {data}=await axios.post('http://localhost:3000/register',{username:name,password:pwd})
      console.log(data)
      if(data.code===200){
        setSucc(true)
        setErr(false)
        navigate('/login')
      }else{
        setSucc(false)
        setErr(true)
      }
    }

  return (
    <div id='zhuce'>
        <div className='zhubox'>
            <div className='zhutitle'>注册</div>
            <div className='zhuinput-box'>
                用户名：<input type='text' value={name} onChange={(e)=>setName(e.target.value)} placeholder='请输入用户名'/>
            </div>
            <div className='zhuinput-box'>
                密码：<input type='password' value={pwd} onChange={(e) => {
                        setPwd(e.target.value);
                        // 实时检查第一次输入密码的长度和复杂度是否达到要求
                        if (e.target.value.length < 8) {
                            setFlag(true);
                        } else {
                            checkPasswordComplexity(e.target.value);
                        }
                    }} placeholder='请输入密码'/>
            </div>
            <div className='zhuinput-box'>
                确认密码：<input type='password' value={pwd2} onChange={(e)=>jiancha(e)} placeholder='请再次输入密码'/>
            </div>
            {/* <span className={flag?'xian':'xiao'}>两次输入的密码不一致</span> */}
            <span className={flag? 'xian' : 'xiao'}>
                    {flag && (pwd!== pwd2) && '两次输入的密码不一致'}
                    {flag && (pwd === pwd2) && '密码不符合复杂度要求'}
                </span>
            <div className='zhubtn-box'>
                <Button theme="primary" variant="base" onClick={register}>
                    注册
                </Button>
            </div>
        </div>
        <Notification
            theme="success"
            title="注册成功"
            className={succ?'success-notification' : 'success-notification_xiao'}
            duration={200}
            closeBtn={true}
            onCloseBtnClick={() => {
                setSucc(false);
            }}
            onDurationEnd={() => {
                setSucc(false);
            }}
        />
        <Notification
            theme="error"
            title="注册失败"
            className={err?'error-notification' :'error-notification_xiao'}
            duration={200}
            closeBtn={true}
            onCloseBtnClick={() => {
                setErr(false);
            }}
            onDurationEnd={() => {
                setErr(false);
            }}
        />
    </div>
  )
}
